<template>
  <div id="card">
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div class="clearfix">
            <div class="fl">
              <p class="preview-title fl" v-text="courseName"></p>
              <p class="preview-line fl">/</p>
              <p class="beyond-hiding fl" v-text="chapterName"></p>
            </div>
            <!-- 王天宇 星级评分 html-->
            <div v-show="roles=='STUDENT'&&countdown>0" class="down-time">
              <span>剩余时间：</span>
              <!-- 倒计时 -->
              <span>{{ hours }}:{{minutes}}:{{seconds}}</span>
            </div>
            <div class="fr" @click="goToCompetitionDetail" style="cursor:pointer;font-size:18px;">退出</div>
          </div>
        </div>
      </div>
    </div>
    <div id="jx-contain">
      <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe> -->
      <!-- 任务列表盒子 -->
      <div class="sideBox">
        <ul v-if="roles == 'STUDENT'">
          <li @click="detalList" v-if="_btn_flag == undefined">
            <i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表
          </li>
          <!-- <li @click="videoDialog" v-if="videoUrlCopy != '' && stepTypeStr != '多步骤实验'"><i class="iconfont icon-shipin1"></i>视频</li> -->
          <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
          <!--  <li @click="openNoteWindow" v-if="experimentreport != '' || displayVersion != ''"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li> -->
          <li @click="dialogReport=true" v-if="reportType==2">
            <i class="iconfont icon-ico_compile_thick"></i>实验过程
          </li>
          <li @click="dialogReportLine=true" v-if="reportType==1">
            <i class="iconfont icon-ico_compile_thick"></i>实验过程
          </li>
        </ul>
        <ul v-if="roles == 'TEACHER' || roles == 'ADMIN'">
          <li @click="detalList" v-if="_btn_flag == undefined">
            <i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表
          </li>
          <!-- <li @click="videoDialog" v-if="videoUrlCopy != '' && stepTypeStr != '多步骤实验'">
            <i class="iconfont icon-shipin1"></i>视频
          </li> -->
          <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
          <!-- <li @click="openNoteWindow" v-if="experimentreport != '' || displayVersion != ''">
            <i class="iconfont icon-ico_compile_thick"></i>批注
          </li>
          <li class="sideBoxActive" v-else>
            <i class="iconfont icon-ico_compile_thick"></i>批注
          </li> -->
        </ul>
      </div>
      <!-- 王天宇 实验报告 HTML -->
      <div class="sideBox sideBox2" v-if="roles == 'STUDENT'">
        <div>
          <!-- 实验报告弹窗 -->
          <div v-show="dialogReport" class="vir-report">
            <div class="vir-report-header">
              <span>实验过程</span>
              <!-- <span class="model-download" @click="downloadModel">实验报告模板下载
                <i class="iconfont icon-tubiaozhizuo-"></i>
              </span> -->
              <button @click="dialogReport = false" type="button" class="el-dialog__headerbtn">
                <i class="el-dialog__close el-icon el-icon-close"></i>
              </button>
            </div>
            <div class="vir-report-main">
              <div class="excel-content">
                <div v-if="ReportUploadForm.isUpload" class="excel-content-yes">
                  <img src="../../../assets/images/upload-success.png" style="margin-bottom:20px;" />
                  <div style="margin-bottom:20px;">实验报告已上传</div>
                </div>
                <div v-else class="excel-content-no">
                  <img src="../../../assets/images/upload-question.png" style="margin-bottom:20px;" />
                  <div style="padding:0px 0 20px;">暂无报告</div>
                </div>
                <div class="btn">
                  <div class="button-style" @click="dialogUpload = true">上传实验过程</div>
                </div>
              </div>
              <!-- <div v-if="ReportUploadForm.isUpload" style="margin-bottom:20px;">
                <img src="../../../assets/images/upload-success.png" />
              </div>
              <div style="padding:0px 0 20px;" v-if="ReportUploadForm.isUpload">{{ resQuestionData.reportFileName }}</div>
              <div class="button-style" @click="dialogUpload = true">上传实验过程</div> -->
            </div>
          </div>
          <!-- 在线实验报告弹窗 -->
          <div v-show="dialogReportLine" class="vir-reportline" :class="{'line-full-box':isLineFull}">
            <div class="vir-reportline-header">
              <span>实验过程</span>
              <span v-if="reportType==1 &&isOnSynchronization==2" @click="Synchronization" class="synchronization">
                <i class="el-icon-refresh">同步实验过程</i>
              </span>
              <div class="line-full">
                <i @click="fullLine(1)" v-if="!isLineFull" class="iconfont icon-full-screen" title="放大"></i>
                <i @click="fullLine(2)" v-else class="iconfont icon-suoxiao" title="恢复窗口"></i>
              </div>
              <button @click="dialogReportLine = false" type="button" class="el-dialog__headerbtn">
                <i class="el-dialog__close el-icon el-icon-close"></i>
              </button>
            </div>
            <div class="vir-reportline-main">
              <mavonEditor ref="reportline"></mavonEditor>
            </div>
            <div class="vir-reportline-footer">
              <div class="btn-group">
                <!-- 临时保存置灰 -->
                <el-button class="button-style" @click="ReportNoteSave(1,0)">保存</el-button>&nbsp;&nbsp;&nbsp;
                <button class="button-style" @click="ReportNoteSave(1,1)">提交</button>
              </div>
            </div>
          </div>
        </div>
        <ul v-if="classId">
          <li style="line-height:18px;" @click="dialogReport = !dialogReport; dialogReportLine = false;">
            <i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>实验过程
          </li>
          <li style="line-height:18px; margin-top:50px;" @click="dialogReportLine = !dialogReportLine; dialogReport = false;">
            <i class="iconfont icon-ico_compile_thick"></i>实验过程
          </li>
        </ul>
      </div>
      <!-- 王天宇 实验报告 HTML end -->

      <!-- 竞赛题目展示start -->
      <div>
        <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" :src="displayVersion" frameborder="0"></iframe> -->
        <!-- <div class="jx-content" v-if="laboratoryTarget != ''" > <div class="markdown-body" v-html="laboratoryTarget" ></div></div>
                   <div class="jx-content" v-if="displayVersion"> <div class="markdown-body" v-html="displayVersion"></div></div> -->
        <div class="jx-content" v-if="laboratoryTarget != ''">
          <div class="upload-btns">
            <div @click="dialogUpload1 = true">
              分析报告上传
              <div v-if="analyseFileName">
                已上传
                <br />
                {{ analyseFileName }}
              </div>
            </div>
            <div @click="dialogUpload2 = true">
              查重报告上传
              <div v-if="distinctFileName">
                已上传
                <br />
                {{ distinctFileName }}
              </div>
            </div>
          </div>
          <!-- 不要了 -->
          <!-- <div class="markdown-body" v-html="laboratoryTarget"></div> -->
          <!-- <div class="markdown-body" v-html="displayVersion"></div> -->
        </div>
        <div class="no-data-tips" v-if="laboratoryTarget ==''">
          <img src="./../../../assets/images/index_no_data.png" />
          <p>暂无内容</p>
        </div>
      </div>
      <!-- 竞赛题目展示end -->
      <!-- 没用start -->
      <div v-if="stepTypeStr =='多步骤实验'">
        <div class="manySteep" v-if="stepList.length>0">
          <div class="manySteep-center">
            <div class="manySteep-left">
              <i class="iconfont icon-gengduo" @click="showFn"></i>
              <span class="titlesteep" v-if=' stepList.length>0' :title="stepList.length>0 ?stepList[stepListIndex].name  : ''">{{stepListIndex +1}}、{{stepList.length>0 ?stepList[stepListIndex].name  : ''}}</span>
            </div>
            <div class="manySteep-right">
              <span class="prevpage button-style" v-if="stepListIndex > 0" @click="page(-1)">上一步</span>
              <span class="nextvpage button-style" v-if="stepList.length > 1" @click="page(1)">下一步</span>
            </div>
          </div>
        </div>
        <div class="maskleft" @click="closeFn"> </div>
        <ul class="maskleft-ul" id="spaceHeight">
          <li v-for="(item , index) in stepList" :key="index" :class="{ activeSteep : stepListIndex == index}">{{ index+1 }}、{{ item.name }}</li>
        </ul>

        <div class="jx-content" v-show="experimentVideoData2 || experimentreport || (expeimenttarget && stepListIndex ==0)">
          <!-- 视频 -->
          <div v-show="experimentVideoData2">
            <video ref="videoStep" id="videoStep" class="video-js vjs-default-skin vjs-big-play-centered" controls style="object-fit:fill">
              <!-- <source  :src="experimentVideoData2" > -->
            </video>
          </div>
          <!-- 目标 -->
          <div class="markdown-body" v-html="expeimenttarget" v-show="expeimenttarget && stepListIndex ==0"></div>
          <!-- 手册 -->
          <div class="markdown-body aa" v-html="experimentreport"></div>

        </div>
        <div class="no-data-tips" v-if="!experimentVideoData2  && ( !expeimenttarget || stepListIndex !=0 ) && !experimentreport">
          <img src="./../../../assets/images/index_no_data.png" />
          <p>暂无内容</p>
        </div>
      </div>
      <!-- 没用end -->
    </div>
    <!-- 视频盒子 -->
    <el-dialog title="视频" :visible.sync="dialogVisible2" width="40%" :close-on-click-modal="false" @close='closeVideoDialog'>
      <!-- <video id="video"  autoplay controls class="videoShow" disablePictureInPicture  controlslist="nodownload" :src="videoUrl" ></video> -->
      <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' width="100%" height="346" style="object-fit:fill">
        <source :src="videoUrl">
      </video>
    </el-dialog>
    <!-- 教师笔记盒子 -->
    <div class="el-dialog__wrapper NotesBox el-annotation" id="onlyDialog" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
      <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
        <div class="el-dialog__header">
          <span class="el-dialog__title">批注</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn">
            <i @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body">
          <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
          <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
          <!-- <mavonEditor ref="question" class="questionNote"></mavonEditor> -->
        </div>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <button @click="NoteSave" class="button-style saveNote">保存</button>
            <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
          </span>
        </div>
      </div>
    </div>
    <!-- 学生笔记盒子 -->
    <div class="el-dialog__wrapper el-notes" id="onlyDialog" v-if="roles == 'STUDENT'">
      <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
        <div class="el-dialog__header">
          <span class="el-dialog__title">笔记</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn">
            <i @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body">
          <el-input ref="noteVal" id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
          <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
          <!-- <mavonEditor ref="question" class="questionNote"></mavonEditor> -->
        </div>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <button @click="NoteSave" class="button-style saveNote">保存</button>
            <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
          </span>
        </div>
      </div>
    </div>
    <!-- 专科版本添加详情盒子 -->
    <div class="detailBox blocks">
      <div class="chapterList-top">
        <p class="fl">任务列表</p>
        <div class="fr">
          <i class="iconfont icon-Group-" @click="deleteFns"></i>
        </div>
      </div>
      <el-collapse accordion v-model="activeName" @change="handleChange">
        <div v-for="(item,index) in appList" :key="index">
          <div class="collapsTitle" @click="EnteDetails(item)">
            <!-- <i class="iconfont icon-chaibaoguoqujian" :style="item.taskId==taskId?'color:#fff':''"></i> -->
            <span class="el-icon-notebook-2" :style="item.taskId==taskId?'color: #fff;':''"></span>
            <span class="collapsTitle_span" :style="item.taskId==taskId?'color:#fff':''">任务{{index+1}}&nbsp;{{item.name}}</span>
          </div>
        </div>
      </el-collapse>
    </div>
    <!-- 专科版本弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
      <div class="dialog-content">
        <i class="iconfont icon-tishi"></i>
        <p>有其它实验正在进行中，是否停止它进入该实验?</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
        <el-button class="button-style" @click="VirtualSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 王天宇 实验报告  -->

    <!-- 实验报告文件上传 -->
    <el-dialog :close-on-click-modal="false" class="upload-dialog" title="上传实验过程" :visible.sync="dialogUpload" width="460px" @close="ReportUploadClose">
      <el-form :model="ReportUploadForm" :rules="ReportUploadRules" ref="ReportUploadForm" label-width="100px">
        <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
          <el-button class="button-style">上传文件
            <input id="report-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getReportFile">
            </input>
          </el-button>
          <p style="margin-top:10px; line-height:24px;" v-if="ReportUploadForm.versionFile.length>0">已选: {{ReportUploadForm.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" @click="ReportUploadSave('ReportUploadForm')">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog class="bigger-dialog" :visible.sync="bigger">
      <img :src="biggerImgPath">
    </el-dialog>
    <!-- 王天宇 实验报告 end -->

    
    <el-dialog :close-on-click-modal="false" class="upload-dialog" title="分析报告上传" :visible.sync="dialogUpload1" width="460px" @close="ReportUploadClose">
      <el-form :model="upload1" :rules="ReportUploadRules" ref="upload1" label-width="100px">
        <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
          <el-button class="button-style">上传文件
            <input id="upload1" type="file" auto-complete="off" @change="getReportFile1" accept="application/pdf">
          </el-button>
          <p style="margin-top:10px; line-height:24px;" v-if="upload1.versionFile.length>0">已选: {{upload1.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" @click="upload1Save('upload1')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" class="upload-dialog" title="查重报告上传" :visible.sync="dialogUpload2" width="460px" @close="ReportUploadClose">
      <el-form :model="upload2" :rules="ReportUploadRules" ref="upload2" label-width="100px">
        <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
          <el-button class="button-style">上传文件
            <input id="upload2" type="file" auto-complete="off" @change="getReportFile2" accept="application/pdf">
          </el-button>
          <p style="margin-top:10px; line-height:24px;" v-if="upload2.versionFile.length>0">已选: {{upload2.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" @click="upload2Save('upload2')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videojs from 'video.js' //视频
import mavonEditor from '../../../components/mavonEditor'
import { steep } from '@/api/Virtual'
import {
  postMarkdownTSCP,
  getReportTSCP,
  getTopicTSCP,
  postWordTSCP,
  SynchronousReportTSCP,
  getTaskListTSCP,
  getReportTypeTSCP,
  getTaskAndAnswerInfoCP,
} from '@/api/competitionPlatform'
export default {
  components: { mavonEditor },
  data() {
    return {
      analyseFileName:"",
      distinctFileName:"",
      dialogUpload1:false,
      dialogUpload2:false,
      //倒计时定时器
      countTimeInterval: '',
      countTimeInterval2: '',
      //保存htmlCount
      render: '',
      //展示倒计时
      hours: 0,
      minutes: 0,
      seconds: 0,
      // 获取倒计时
      countdown: 0,
      //是否开启同步按钮,只有为2的时候开启
      isOnSynchronization: 0,
      // 报告版本
      reportType: 0,
      //临时保存置灰
      onlineCommit: true,
      // 王天宇 星级评分 data
      starValue: 0,
      starColors: ['#c0c4cc', '#c0c4cc', '#c0c4cc '],
      // 王天宇 星级评分 data end
      //
      //在线是否全屏
      isLineFull: false,
      //markdown工具栏
      toolbarsMav: {
        bold: true, // 粗体
        italic: false, // 斜体
        header: true, // 标题
        //underline: true, // 下划线
        //strikethrough: true, // 中划线
        //mark: true, // 标记
        //superscript: true, // 上角标
        //subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        help: true, // 帮助
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true, // 预览
        //fullscreen: true    // 全屏编辑
      },
      //实验报告弹窗
      dialogReport: false,
      //实验过程弹窗
      dialogReportLine: false,
      //获取实验报告数据
      resQuestionData: '',
      // 实验报告上传弹窗
      dialogUpload: false,
      ReportUploadRules: {
        versionFile: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ],
      },
      // 实验报告上传
      ReportUploadForm: {
        fileName: '',
        versionFile: '',
        isUpload: false,
      },
      // 分析报告上传
      upload1: {
        fileName: '',
        versionFile: '',
        isUpload: false,
      },
      // 查重报告上传
      upload2: {
        fileName: '',
        versionFile: '',
        isUpload: false,
      },
      //
      displayVersion: '',
      // 目标
      laboratoryTarget: '',
      wid: 0,
      hei: 0,
      // 视频地址
      videoUrl: '',
      // 视频地址防关闭
      videoUrlCopy: '',
      dialogVisible1: false,
      // 视频显示隐藏
      dialogVisible2: false,
      // 学习笔记值
      noteVal: '',
      // 课程名称
      courseName: '',
      // 章节名称
      chapterName: '',
      //身份获取
      roles: '',

      //专科版本
      activeName: '',
      //专科数据
      appList: [],
      //是否添加过班级
      userStatus: '',
      //跳转值
      typesStatus: '',
      //占用弹窗
      dialogVirtual: false,
      //判断是从技术库
      _btn_flag: '',
      //存储点击的那个章节id
      clickId: '',
      //详情列表控制值
      openFlag: '',

      //班级Id
      classId: '',

      //是否是多任务
      stepTypeStr: '',
      steepList: [],

      singleTask: '',
      myVideo: '',

      // 图片放大
      biggerImgPath: '',
      bigger: false,

      //步骤字段
      stepListIndex: 0,
      stepList: [],
      // 视频
      experimentVideoData2: '',
      //目标
      expeimenttarget: '',
      //手册
      experimentreport: '',
      //视频
      myVideo2: '',
      //视频统计
      videoAll: '',
      videocurrentTime: '',

      videostatus: '',
      //章节id
      single: '',
      //向后台发送数据
      websock2: '',

      //单步骤
      myVideo3: '',
      //over:''
      //课程id
      courseId: 0,
      //章节
      chapterId: 0,
      // 任务
      taskId: 0,
    }
  },

  created() {
    let self = this
    //班级Id
    self.classId = self.$route.query.classId
    // 从状态管理获取roles
    self.roles = self.$store.state.user.roles[0]
    // 课程ID
    self.courseId = self.$route.query.courseId
    // 章节ID
    self.chapterId = self.$route.query.chapterId
    //任务id
    self.taskId = self.$route.query.taskId

    //章节
    self.single = self.$route.query.singleChaper

    //是否是多任务
    self.stepTypeStr = self.$route.query.stepTypeStr
    //专科版本
    //如果是从何技术库来的，则隐藏列表
    self._btn_flag = self.$route.query._btn_flag
    // 获取报告版本
    this.getReportType()
    // 初始化获取资源
    self.InitGetResource()
    // 初始化头部信息
    self.InitHeaderInfo()
    //初始化详情数据
    self.DetailData()
    //专科版本
    //初始化班级
    self.ClassInit()

    //yx 添加分辨率判断
    self.$nextTick(() => {
      if (window.screen.height <= 900) {
        //console.log(window.screen.height,147)
        $('.blocks').css('max-height', '520px')
        $('.detailBox').css('max-height', '520px')
        $('.blocks').css('right', '110px')
      }
    })

    //获取步骤
    if (this.stepTypeStr == '多步骤实验') {
      this.getlist()
    }
    if (this.roles == 'STUDENT') {
      this.onmessages()
    }

    // 王天宇 星级评分 created
    //获取评分
    self.getStar()
    //学生身份视频统计

    // 王天宇 星级评分 created end
  },
  async mounted() {
    let screenWidth = document.documentElement.clientWidth
    let screenHeight = document.documentElement.clientHeight
    this.wid = '100%'
    this.hei = screenHeight - 200
    if (this.roles == 'STUDENT') {
      this.$refs.reportline.toolbars = this.toolbarsMav
      //获取实验报告
      this.ExperimentalReport()
    }
    var height = $(window).height() - 160
    $('.maskleft-ul').css('height', height)
    $('#spaceHeight').css('height', height)
    // 获取倒计时，并且每60s获取一次
    await this.getDowntime()
    this.countTimeInterval = setInterval(() => {
      this.getDowntime()
    }, 60000)
    // 进行倒计时
    this.countDownTime()
    this.getPdf();
  },
  destroyed() {
    if (this.myVideo) {
      this.myVideo.dispose()
    } else if (this.myVideo2) {
      this.myVideo2.dispose()
    }
    //销毁定时器
    clearInterval(this.countTimeInterval)
    clearInterval(this.countTimeInterval2)
  },
  watch: {
    seconds() {
      if (this.seconds <= 0 && this.minutes <= 0 && this.hours <= 0) {
        if (this.roles == 'STUDENT') {
          this.$message('作答时间结束，已返回首页')
          this.$router.replace('/Teaching/index')
          clearInterval(this.countTimeInterval)
          clearInterval(this.countTimeInterval2)
        } else {
          clearInterval(this.countTimeInterval)
          clearInterval(this.countTimeInterval2)
        }
      }
    },
  },
  methods: {
    // 回显pdf
    getPdf() {
      let self = this
      self.$http
        .get('/tes/match-report?courseId=' + self.courseId + '&chapterId=' + self.taskId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.analyseFileName = res.data.analyseFileName;
            self.distinctFileName = res.data.distinctFileName;
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取倒计时
    getDowntime() {
      return this.$http
        .get(`/tes/match/timeLeft/${this.courseId}`)
        .then((res) => {
          if (res.data.code == 200) {
            if (res.data.data != undefined && res.data.data > 0) {
              this.countdown = res.data.data
            } else {
              //销毁定时器
              clearInterval(this.countTimeInterval)
              clearInterval(this.countTimeInterval2)
            }
            // this.countdown = 10  //测试倒计时好不好用
          }
        })
        .catch((err) => console.log(err))
    },
    //倒计时
    countDownTime() {
      let yearDate = new Date(this.countdown * 1000 - -new Date())
      this.countTimeInterval2 = setInterval(() => {
        let nowDate = new Date()
        let total = parseInt((yearDate.getTime() - nowDate.getTime()) / 1000)
        let day = parseInt(total / 86400)
        total %= 86400
        let hour = parseInt(total / 3600)
        total %= 3600
        let minute = parseInt(total / 60)
        let second = total % 60
        if (hour < 10) {
          hour = '0' + hour
        }
        if (minute < 10) {
          minute = '0' + minute
        }
        if (second < 10) {
          second = '0' + second
        }
        this.hours = hour
        this.minutes = minute
        this.seconds = second
        if (-hour >= 0 && -minute >= 0 && -second >= 0) {
          clearInterval(this.countTimeInterval2)
          this.hours = 0
          this.minutes = 0
          this.seconds = 0
        }
      }, 1000)
    },
    //退出
    goToCompetitionDetail() {
      this.$router.replace('/CompetitionDetail')
    },
    // 同步实验过程
    Synchronization() {
      let that = this
      let data = {
        courseId: that.courseId, //竞赛id
        taskId: that.taskId, //任务id
        error: true, //开启组员已提交认证
      }
      this.render = that.$refs.reportline.getRender()
      // SynchronousReportTSCP(data)
      that.$http
        .post(`/tes/match-report/sync-markdown`, data)
        .then((res) => {
          if (res.data.code == 200) {
            that.$refs.question.value = res.data.data
            // 中断then链
            return Promise.reject('完成')
          } else if (res.data.code == 20002) {
            return that.$confirm(res.data.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            that.$message.error(res.data.message)
            // 中断then链
            return Promise.reject(res.data.message)
          }
        })
        .then(() => {
          data.error = false
          return that.$http.post(`/tes/match-report/sync-markdown`, data)
        })
        .then((res) => {
          if (res.data.code == 200) {
            //  res.data.data
            that.$refs.reportline.changeVal(res.data.data)
            return that.$message({
              type: 'success',
              message: `同步完成`,
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //获取报告版本
    getReportType() {
      getReportTypeTSCP(this.courseId).then((res) => {
        if (res.code == 200) {
          this.reportType = res.data.reportForm
          this.isOnSynchronization = res.data.form
        }
      })
    },
    // 王天宇 星级评分 methods
    //评分获取
    getStar() {
      let self = this
      //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
      ///tes/course/课程id/chapter/任务id/info
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/info'
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.starValue = res.data.difficultyScore - 0
          } else {
            self.$message.error(res.message)
          }
        })
    },
    // 王天宇 星级评分 methods end
    // 王天宇 实验报告
    //在线点击全屏
    closeFn() {
      $('.maskleft-ul').css('left', '-100%')
      $('.maskleft').css('opacity', '0')
      $('.maskleft').css('display', 'none')
    },
    showFn() {
      let timer
      clearInterval(timer)
      $('.maskleft').css('opacity', '1')
      $('.maskleft').css('display', 'block')
      timer = setTimeout(() => {
        $('.maskleft-ul').css('display', 'block')
        $('.maskleft-ul').css('left', '0')
      }, 300)
    },
    fullLine(type) {
      // console.log(window.innerHeight - 230, 123)
      //点击变全屏
      if (type == 1) {
        this.isLineFull = true
        this.$nextTick(function () {
          $('.line-full-box .mavon-editor-con > div').height(
            window.innerHeight - 300
          )
        })
      }
      //点击恢复
      else {
        this.isLineFull = false
        this.$nextTick(function () {
          $('.vir-reportline .mavon-editor-con > div').height(100)
        })
      }
    },
    // 实验过程提交
    ReportNoteSave(tag, falg) {
      // falg 区分提交与保存  0 保存 1 提交
      let self = this
      let data = {}
      if (tag == 1) {
        data = {
          courseId: this.courseId, //竞赛id
          taskId: this.taskId, //任务id
          error: true, //当用户点击提交，需要检查是否有其他用户提交。
          submited: true, //是否提交  true：是 false：否
          markdownContent: self.$refs.reportline.value,
          htmlContent: self.$refs.reportline.getRender() || this.render,
        }
        if (falg == 0) {
          data.submited = false
        }
      } else if (tag == 2) {
        data = {
          content: self.$refs.ReportQuestionDialog.value,
          htmlContent: self.$refs.ReportQuestionDialog.getRender(),
          submited: true,
          courseId: this.courseId, //竞赛id
          taskId: this.taskId, //任务id
          error: true, //当用户点击提交，需要检查是否有其他用户提交。
        }
        if (falg == 0) {
          data.submited = false
        }
      }
      this.$http
        .post(`/tes/match-report`, data)
        .then((res) => {
          if (res.data.code == '200') {
            if (falg == 0) {
              self.$message({
                message: '保存成功',
                type: 'success',
              })
            } else {
              //临时保存置灰
              self.onlineCommit = true
              self.$message({
                message: '提交成功，教师未批阅之前您可以反复提交。',
                // message: "提交成功",
                type: 'success',
              })
            }
            if (tag == 2) {
              self.$refs.ReportQuestion.value =
                self.$refs.ReportQuestionDialog.value
            }
            // 中断then链
            return Promise.reject('提交完成')
          } else if (res.data.code == '20001') {
            return this.$confirm(res.data.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            self.$message.error(res.data.message)
            // 中断then链
            return Promise.reject(res.data.message)
          }
        })
        .then((res) => {
          data.error = false
          return this.$http.post(`/tes/match-report`, data)
        })
        .then((res) => {
          if (res.data.code == 200) {
            return this.$message({
              type: 'success',
              message: `提交完成`,
            })
          } else {
            self.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //下载修改文件名
    downloadModel() {
      let that = this
      //console.log(that.resQuestionData.modelPath,1111);
      that.$downloadfile.download(
        that.resQuestionData.modelPath,
        '实验报告模板.doc'
      )
    },
    // 获取实验报告
    ExperimentalReport() {
      // 先获取报告版本，再获取报告内容
      getReportTypeTSCP(this.courseId)
        .then((res) => {
          if (res.code == 200) {
            this.reportType = res.data.reportForm
          }
        })
        .then(() => {
          return getReportTSCP(this.courseId, this.taskId)
        })
        .then((res) => {
          if (res.code == '200') {
            if (this.reportType == 1) {
              this.$nextTick(() => {
                this.$refs.reportline.changeVal(res.data.htmlContent)
              })
            } else if (this.reportType == 2) {
              // //临时保存置灰
              // this.onlineCommit = res.data.onlineCommit
              this.ReportUploadForm.fileName = res.data.fileName
              if (this.ReportUploadForm.fileName) {
                this.ReportUploadForm.isUpload = true
              }
              this.resQuestionData = res.data
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传文件
    getReportFile($event) {
      let self = this
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
      let fileType = $event.target.files[0].name
      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      )
      if (!isLt2M) {
        self.$message.error('上传文件大小不能超过 500MB!')
        return false
      }
      self.ReportUploadForm.fileName = $event.target.files[0]
      self.ReportUploadForm.versionFile = $event.target.files[0].name
    },
    // 上传实验过程弹窗关闭
    ReportUploadClose() {
      let self = this
      self.dialogUpload = false
      self.dialogUpload1 = false
      self.dialogUpload2 = false
      self.ReportUploadForm.versionFile = ''
      self.upload1.versionFile = ''
      self.upload2.versionFile = ''
      $('#report-file-upload').val('')
      $('#upload1').val('')
      $('#upload2').val('')
    },
    // 保存word上传文件
    ReportUploadSave(form) {
      let self = this
      if (self.ReportUploadForm.versionFile == '') {
        self.$message.error('请上传文件')
        return
      }
      self.contentLoading = self.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      var formData = new FormData()
      formData.append('courseId', this.courseId)
      formData.append('taskId', this.taskId)
      formData.append('error', true)
      formData.append('file', self.ReportUploadForm.fileName)
      self.$http
        .post(`/tes/match-report/upload`, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.ReportUploadForm.fileName = res.data
            self.$refs[form].resetFields()
            self.ReportUploadForm.isUpload = true
            self.dialogUpload = false
            self.contentLoading.close()
            $('#report-file-upload').val('')
            // 中断then
            return Promise.reject('完成')
          } else if (res.code == 20001) {
            return this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            self.contentLoading.close()
            self.$message.error(res.message)
            // 中断then
            return Promise.reject('失败')
          }
        })
        .then((res) => {
          formData.set('error', false)
          return self.$http.post(`/tes/match-report/upload`, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.ReportUploadForm.fileName = res.data
            self.$refs[form].resetFields()
            self.ReportUploadForm.isUpload = true
            self.dialogUpload = false
            self.contentLoading.close()
            $('#report-file-upload').val('')
          } else {
            self.$message({
              message: res.message,
              type: 'warning',
            })
            self.dialogUpload = false
            self.contentLoading.close()
            return Promise.reject()
          }
        })
        .catch((err) => {
          self.contentLoading.close()
          console.log(err)
        })
    },
    
    // 上传文件
    getReportFile1($event) {
      let self = this
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
      let fileType = $event.target.files[0].name
      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      )
      if (!isLt2M) {
        self.$message.error('上传文件大小不能超过 500MB!')
        return false
      }
      self.upload1.fileName = $event.target.files[0]
      self.upload1.versionFile = $event.target.files[0].name
    },
    // 上传文件
    getReportFile2($event) {
      let self = this
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
      let fileType = $event.target.files[0].name
      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      )
      if (!isLt2M) {
        self.$message.error('上传文件大小不能超过 500MB!')
        return false
      }
      self.upload2.fileName = $event.target.files[0]
      self.upload2.versionFile = $event.target.files[0].name
    },
    // 保存word上传文件
    upload1Save(form) {
      let self = this
      if (self.upload1.versionFile == '') {
        self.$message.error('请上传文件')
        return
      }
      self.contentLoading = self.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      var formData = new FormData()
      formData.append('courseId', this.courseId)
      formData.append('taskId', this.taskId)
      formData.append('error', true)
      formData.append('file', self.upload1.fileName)
      formData.append('reportType', 2)
      
      self.$http
        .post(`/tes/match-report/uploadAnalyseOrRepetition`, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((response) => {
          let res = response.data
            console.log(12345);
          if (res.code == '200') {
            console.log(123456);
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.upload1.fileName = res.data
            self.getPdf();
            console.log(1234567);
            self.$refs[form].resetFields()
            self.upload1.isUpload = true
            self.dialogUpload1 = false
            self.contentLoading.close()
            $('#report-file-upload').val('')
            // 中断then
            return Promise.reject('完成')
          } else if (res.code == 20001) {
            return this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            self.contentLoading.close()
            self.$message.error(res.message)
            // 中断then
            return Promise.reject('失败')
          }
        })
        .then((res) => {
          formData.set('error', false)
          return self.$http.post(`/tes/match-report/upload`, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.upload1.fileName = res.data
            self.getPdf();
            self.$refs[form].resetFields()
            self.upload1.isUpload = true
            self.dialogUpload1 = false
            self.contentLoading.close()
            $('#report-file-upload').val('')
          } else {
            self.$message({
              message: res.message,
              type: 'warning',
            })
            self.dialogUpload1 = false
            self.contentLoading.close()
            return Promise.reject()
          }
        })
        .catch((err) => {
          self.contentLoading.close()
          console.log(err)
        })
    },
    
    // 保存word上传文件
    upload2Save(form) {
      let self = this
      if (self.upload2.versionFile == '') {
        self.$message.error('请上传文件')
        return
      }
      self.contentLoading = self.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      var formData = new FormData()
      formData.append('courseId', this.courseId)
      formData.append('taskId', this.taskId)
      formData.append('error', true)
      formData.append('file', self.upload2.fileName)
      formData.append('reportType', 3)
      
      self.$http
        .post(`/tes/match-report/uploadAnalyseOrRepetition`, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.upload2.fileName = res.data
            self.getPdf();
            self.$refs[form].resetFields()
            self.upload2.isUpload = true
            self.dialogUpload2 = false
            self.contentLoading.close()
            $('#upload2').val('')
            // 中断then
            return Promise.reject('完成')
          } else if (res.code == 20001) {
            return this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            self.contentLoading.close()
            self.$message.error(res.message)
            // 中断then
            return Promise.reject('失败')
          }
        })
        .then((res) => {
          formData.set('error', false)
          return self.$http.post(`/tes/match-report/upload`, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '文件上传成功',
              type: 'success',
            })
            self.upload2.fileName = res.data
            self.getPdf();
            self.$refs[form].resetFields()
            self.upload2.isUpload = true
            self.dialogUpload2 = false
            self.contentLoading.close()
            $('#upload2').val('')
          } else {
            self.$message({
              message: res.message,
              type: 'warning',
            })
            self.dialogUpload2 = false
            self.contentLoading.close()
            return Promise.reject()
          }
        })
        .catch((err) => {
          self.contentLoading.close()
          console.log(err)
        })
    },
    // 王天宇 实验报告 end
    //获取详情数据
    handleChange(val) {
      //val 索引
      this.openFlag = val
      let vals = String(val)
      this.openFlag = vals
    },
    //点击伸缩
    // 初始化头部信息
    InitHeaderInfo() {
      let self = this
      self.$http
        .get('/tes/course/' + self.courseId + '/chapter/' + self.chapterId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            // 课程名称
            self.courseName = res.data.courseName
            // 章节名称
            self.chapterName = res.data.chapterName
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //点击步骤
    page(page) {
      let self = this
      if (self.myVideo2) {
        self.myVideo2.pause()
      }
      //关闭批注弹窗
      $('#onlyDialog').hide()
      if (page == 1) {
        if (self.stepListIndex == self.stepList.length - 1) {
          this.roles == 'STUDENT' && self.classId ? self.videoCount() : ''
          self.stepListIndex = 0
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.manyStep(self.stepChapterId)
        } else {
          this.roles == 'STUDENT' && self.classId ? self.videoCount() : ''
          self.stepListIndex = self.stepListIndex + 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.manyStep(self.stepChapterId)
        }
      } else if (page == -1) {
        if (self.stepListIndex == 0) {
          self.stepListIndex = self.stepList.length - 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.manyStep(self.stepChapterId)
        } else {
          self.stepListIndex = self.stepListIndex - 1
          self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
          self.manyStep(self.stepChapterId)
        }
      }
    },

    //小天发消息
    onmessages() {
      let hostname = window.location.host
      var target =
        'ws://' +
        hostname +
        '/tes/ws/experiment/course/videotime/' +
        this.single
      this.websock2 = new WebSocket(target)
      //this.websock2.onopen = this.websocketonopen2;
      //this.websock2.onclose = this.websocketclose;
      this.over = () => {
        this.websock2.close()
      }
    },
    websocketclose(e) {
      //关闭
      console.log('断开连接', e)
    },
    websocketonopen2() {
      let actions
      if (this.stepTypeStr != '多步骤实验') {
        actions = {
          videoTime: this.videocurrentTime,
          chapterId: this.single,
          classId: this.classId,
          taskId: this.chapterId,
          courseId: this.courseId,
          sumTime: this.videoAll,
          isPlay: this.isPlay,
        }
      } else if (this.stepTypeStr == '多步骤实验') {
        actions = {
          videoTime: this.videocurrentTime,
          chapterId: this.single,
          classId: this.classId,
          stepId: this.stepChapterId,
          taskId: this.chapterId,
          courseId: this.courseId,
          sumTime: this.videoAll,
          isPlay: this.isPlay,
        }
      }

      //请根据实际项目需要进行修改
      if (this.websock2.readyState === 1) {
        this.websocketsend(JSON.stringify(actions))
      }
    },

    websocketsend(Data) {
      //数据发送
      this.websock2.send(Data)
    },
    //向后台传递视频时间和 总时间
    videoCount() {
      let self = this

      if (self.myVideo2 && this.stepTypeStr == '多步骤实验') {
        self.videocurrentTime = self.myVideo2.currentTime()
        //self.videocurrentTime = self.videocurrentTime.toFixed(1)
        self.videoAll = self.myVideo2.duration()
        self.videoAll = self.videoAll.toFixed(1)
        videojs.log(self.videocurrentTime, '视频播放多少!')
        videojs.log(self.videoAll, '视频总时间!')
      }
      if (self.myVideo && this.stepTypeStr != '多步骤实验') {
        self.videocurrentTime = self.myVideo.currentTime()
        //self.videocurrentTime = self.videocurrentTime.toFixed(1)
        self.videoAll = self.myVideo.duration()
        self.videoAll = self.videoAll.toFixed(1)
        videojs.log(self.videocurrentTime, '视频播放多少!')
        videojs.log(self.videoAll, '视频总时间!')
      }
      if (self.videocurrentTime >= 0.1 && !self.videostatus) {
        self.$http
          .put(
            '/tes/course/' +
              self.courseId +
              '/chapter/' +
              self.single +
              '/statistics/' +
              self.classId +
              '/experimentVideo?videotime=' +
              self.videocurrentTime +
              '&stepId=' +
              self.stepChapterId +
              '&sumTime=' +
              self.videoAll +
              '&taskId= ' +
              self.chapterId
          )
          .then((response) => {
            let res = response.data
            if (res.code == '200') {
            } else {
              self.$message.error(res.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    //判断视频是否播放完
    isvideoFinish() {
      let self = this
      if (self.stepChapterId == undefined) {
        self.stepChapterId = ''
      }
      self.$http
        .get(
          '/tes/course/' +
            self.courseId +
            '/chapter/' +
            self.chapterId +
            '/statistics/' +
            self.classId +
            '/experimentVideoFind?stepId=' +
            self.stepChapterId +
            '&taskId= ' +
            self.single
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            //0 没播  1 播完
            self.videostatus = res.data == 0 ? false : true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //新加入获取步骤
    getlist() {
      let self = this
      // self.$http.get('/tes/course/chapter/'+self.chapterId+'/step/list').then(response => {
      steep(self.chapterId).then((response) => {
        let { code, data } = response
        if (code == '200') {
          if (data.length > 0) {
            self.stepList = data
            self.stepChapterId = self.stepList[0].stepChapterId
            self.manyStep(self.stepChapterId)
          } else {
            self.manyStep('')
          }
          if (self.roles == 'STUDENT' && this.stepTypeStr == '多步骤实验') {
            if (self.classId) {
              self.isvideoFinish()
            }
          }
        } else {
          self.$message.error(res.message)
        }
      })
    },
    //多步骤获取资源
    manyStep(stepChapterId) {
      //     let self =this
      //     self.experimentVideoData2 = ''
      //     self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5&stepChapterId='+stepChapterId).then(response => {
      //         let res = response.data
      //         if(res.code == '200'){
      //             //视频
      //             if(res.data.experimentVideo != undefined &&  res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath != undefined && res.data.experimentVideo.displayVersion[0].filePath != '' ){
      //                  //self.experimentVideoData2 = 'https://www.runoob.com/try/demo_source/movie.mp4'
      //                 // self.experimentVideoData2 = res.data.experimentVideo.displayVersion[0].filePath
      //                 self.experimentVideoData2 = res.data.experimentVideo.displayVersion[0].filePath;
      //                 self.$nextTick(()=>{
      //                     $('#videoStep').css('display','block');
      //                     // self.myVideo2.dispose && self.myVideo2.dispose();
      //                     if (!self.myVideo2) {
      //                         self.myVideo2 = videojs(this.$refs.videoStep, {
      //                             bigPlayButton: true,
      //                             textTrackDisplay: false,
      //                             posterImage: true,
      //                             errorDisplay: false,
      //                             controls :true,
      //                             preload: "auto",
      //                             sources: [{
      //                                 type: 'video/mp4',
      //                                 src: self.experimentVideoData2
      //                             }],
      //                             height: 500,
      //                             playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
      //                         },function (){
      //                             if(self.roles == 'STUDENT'){
      //                                 //视频总时长
      //                                 videojs.log(this.duration(),'视频总时间!')
      //                                 self.videoAll = this.duration()
      //                                 self.videoAll = self.videoAll.toFixed(1)
      //                                 this.on('pause', function () {
      //                                     //暂停获得秒数
      //                                     self.videocurrentTime = this.currentTime()
      //                                     self.isPlay = '0'
      //                                     if(!self.videostatus){
      //                                         self.websocketonopen2()
      //                                     }
      //                                 // videojs.log(self.videocurrentTime,'2222!')
      //                                 });
      //                                 this.on('ended', function () { //视频播放完毕触发
      //                                 //  videojs.log(this.currentTime(),'11111!')
      //                                     //视频播放完毕获得秒数
      //                                     self.videocurrentTime = this.currentTime()
      //                                     // $('.vjs-progress-holder').css('opacity', '1')
      //                                 });
      //                                 this.on('play', function () { //视频播放
      //                                     self.videocurrentTime = this.currentTime()
      //                                     self.videoAll = this.duration()
      //                                     self.videoAll = self.videoAll.toFixed(1)
      //                                     self.isPlay = '1'
      //                                     if(!self.videostatus){
      //                                         self.websocketonopen2()
      //                                     }
      //                                 });
      //                             }
      //                         })
      //                     } else {
      //                         self.myVideo2.src(self.experimentVideoData2);
      //                         self.myVideo2.load(self.experimentVideoData2);
      //                     }
      //                 })
      //             }else{
      //                self.experimentVideoData2 = ''
      //             }
      //             //目标
      //             if(res.data.laboratoryTarget != undefined &&  res.data.laboratoryTarget.displayVersion.length > 0 &&  res.data.laboratoryTarget.displayVersion[0].htmlContent != undefined  && res.data.laboratoryTarget.displayVersion[0].htmlContent != ''){
      //                  self.expeimenttarget = res.data.laboratoryTarget.displayVersion[0].htmlContent
      //             }else{
      //                  self.expeimenttarget = ''
      //             }
      //             //手册
      //             if(res.data.laboratoryManual != undefined && res.data.laboratoryManual.displayVersion.length > 0 && res.data.laboratoryManual.displayVersion[0].htmlContent != undefined  && res.data.laboratoryManual.displayVersion[0].htmlContent != ''){
      //                 self.experimentreport = res.data.laboratoryManual.displayVersion[0].htmlContent
      //             }else{
      //                 self.experimentreport = ''
      //             }
      //             self.$nextTick(() => {
      //                 $('.markdown-body p img').on('click', function(){
      //                     self.biggerImgPath = $(this).attr('src')
      //                     self.bigger = true
      //                 })
      //             })
      //         }else{
      //             self.$message.error(res.message)
      //         }
      //     })
      // },
    },
    // 单步骤初始化获取资源
    InitGetResource() {
      getTopicTSCP(this.courseId, this.taskId).then((res) => {
        if (res.code == 200) {
          if (res.data != '' && res.data != undefined) {
            this.laboratoryTarget = res.data
          }
        }
      })
      // let self = this
      // self.$http
      //   .get(
      //     '/tes/course/' +
      //       self.courseId +
      //       '/chapter/' +
      //       self.chapterId +
      //       '/detail/resource?type=5'
      //   )
      //   .then((response) => {
      //     let res = response.data
      //     if (res.code == '200') {
      //       //判断是 多步骤 还是 单步骤
      //       if (self.stepTypeStr != '多步骤实验') {
      //         if (
      //           res.data.laboratoryManual.displayVersion.length > 0 &&
      //           res.data.laboratoryManual.displayVersion[0].htmlContent
      //         ) {
      //           self.displayVersion =
      //             res.data.laboratoryManual.displayVersion[0].htmlContent
      //         }
      //       }

      //       //视频
      //       if (
      //         res.data.experimentVideo.displayVersion.length > 0 &&
      //         res.data.experimentVideo.displayVersion[0].filePath
      //       ) {
      //         self.videoUrlCopy =
      //           res.data.experimentVideo.displayVersion[0].filePath
      //         // self.videoUrlCopy =  'https://www.runoob.com/try/demo_source/movie.mp4'
      //       }

      //       // 实验目标
      //       if (
      //         res.data.laboratoryTarget.displayVersion.length > 0 &&
      //         res.data.laboratoryTarget.displayVersion[0].htmlContent
      //       ) {
      //         self.laboratoryTarget =
      //           res.data.laboratoryTarget.displayVersion[0].htmlContent
      //       }

      //       //学生端
      //       if (this.roles == 'STUDENT') {
      //         //有视频增加高度
      //         if (this.videoUrlCopy != '' && this.stepTypeStr != '多步骤实验') {
      //           $('#jx-contain .sideBox2').css('top', 350)
      //         }
      //       }
      //       self.$nextTick(() => {
      //         $('.markdown-body p img').on('click', function () {
      //           self.biggerImgPath = $(this).attr('src')
      //           self.bigger = true
      //         })
      //       })
      //     } else {
      //       self.$message.error(res.message)
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    },
    // 打开笔记获取笔记信息
    openNoteWindow() {
      getReportTSCP(this.courseId, this.chapterId)
        .then((res) => {
          if (res.code == '200') {
            self.noteVal = res.data.htmlContent
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      $('#onlyDialog').show()
      $('.detailBox').hide()
    },
    // 关闭笔记
    closeNoteWindow() {
      $('#onlyDialog').hide()
    },
    // 学习笔记保存
    NoteSave() {
      let data = {
        courseId: this.courseId, //竞赛id
        taskId: this.taskId, //任务id
        // taskId: this.chapterId, //任务id
        error: true, //当用户点击提交，需要检查是否有其他用户提交。
        submited: false, //是否提交  true：是 false：否
        markdownContent: this.noteVal,
        htmlContent: this.noteVal,
      }
      postMarkdownTSCP(data)
        .then((res) => {
          if (res.code == '200') {
            if (falg == 0) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
            } else {
              //临时保存置灰
              this.onlineCommit = true
              this.$message({
                message: '提交成功，教师未批阅之前您可以反复提交。',
                // message: "提交成功",
                type: 'success',
              })
            }
            if (tag == 2) {
              this.$refs.ReportQuestion.value =
                this.$refs.ReportQuestionDialog.value
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 视频弹窗
    videoDialog() {
      let self = this
      //self.videoUrl = self.videoUrlCopy
      self.dialogVisible2 = true

      self.InitGetResource()
      if (self.roles == 'STUDENT') {
        this.$nextTick(() => {
          self.myVideo = videojs(
            'video',
            {
              bigPlayButton: true,
              textTrackDisplay: false,
              posterImage: false,
              errorDisplay: false,
              controls: true,
              height: 400,
              width: 400,
              playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放配置
            },
            function onPlayerReady() {
              //视频总时长
              videojs.log(this.duration(), '视频总时间!')
              self.videoAll = this.duration()
              self.videoAll = self.videoAll.toFixed(1)
              this.on('pause', function () {
                //暂停获得秒数
                self.videocurrentTime = this.currentTime()
                self.isPlay = '0'

                if (!self.videostatus) {
                  self.websocketonopen2()
                }
                // videojs.log(self.videocurrentTime,'2222!')
              })
              this.on('ended', function () {
                //视频播放完毕触发
                //  videojs.log(this.currentTime(),'11111!')
                //视频播放完毕获得秒数
                self.videocurrentTime = this.currentTime()
                // $('.vjs-progress-holder').css('opacity', '1')
              })
              this.on('play', function () {
                //视频播放
                self.videocurrentTime = this.currentTime()
                self.videoAll = this.duration()
                self.videoAll = self.videoAll.toFixed(1)
                self.isPlay = '1'
                if (!self.videostatus) {
                  self.websocketonopen2()
                }
              })
            }
          )
          self.myVideo.src(self.videoUrlCopy)
          self.myVideo.load(self.videoUrlCopy)
        })
      } else {
        this.$nextTick(() => {
          self.myVideo = videojs('video', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            controls: true,
            height: 400,
            width: 400,

            playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放配置
          })
          self.myVideo.src(self.videoUrlCopy)
          self.myVideo.load(self.videoUrlCopy)
        })
      }
    },
    // 关闭视频弹窗
    closeVideoDialog() {
      let self = this
      self.$nextTick(() => {
        //   var myVideo = videojs('video')
        //   myVideo.pause();
        self.myVideo.pause()
      })
    },
    // 批注清除内容
    clearContent() {
      let self = this
      if (self.noteVal.length == 0) {
        return
      }

      self.noteVal = ''
    },
    //专科版本中人添加详情
    //初始化详情列表
    DetailData() {
      let self = this
      getTaskListTSCP(this.courseId)
        .then((res) => {
          if (res.code == '200') {
            self.appList = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //点击关闭
    deleteFns() {
      $('.detailBox').hide()
    },
    //点击详情
    detalList() {
      let self = this
      let IndexValue
      for (let i = 0; i < self.appList.length; i++) {
        if (
          JSON.stringify(self.appList[i].chapterId).includes(
            Number(self.chapterId)
          )
        ) {
          IndexValue = i
        }
      }
      // for(let i =0; i< this.appList.length; i++){
      //     if(this.appList[i].recentlyStudiedFlag == 1){
      //         IndexValue = i
      //     }
      // }
      this.activeName = IndexValue
      //最近学习索引等于打开这项
      this.openFlag = IndexValue
      this.scrollFn(790)
      //判断屏幕分辨率
      if (window.screen.height <= 900) {
        this.scrollFn(540)
      }
      $('.detailBox').stop().slideToggle()
      //批注隐藏
      $('.NotesBox').hide()
    },
    //进入详情
    EnteDetails(item, itembig, items) {
      let self = this
      if (this.roles == 'STUDENT') {
        if (item.vmConfig) {
          this.$router.replace({
            path: '/Teaching/MyCourses/STVirtualMachine',
            query: {
              // courseName: this.info.name,
              // taskName: item.name,
              courseId: this.courseId,
              taskId: item.taskId,
              chapterId: item.chapterId,
            },
          })
        } else {
          this.$router.replace({
            path: '/Teaching/MyCourses/VirtualMachineManual',
            query: {
              courseId: this.courseId,
              chapterId: item.chapterId,
              taskId: item.taskId,
            },
          })
          location.reload()
        }
      } else {
        if (item.vmConfig) {
          this.$router.replace({
            path: '/Teaching/MyCourses/VirtualMachine',
            query: {
              courseId: this.courseId,
              taskId: item.taskId,
              chapterId: item.chapterId,
            },
          })
        } else {
          this.$router.replace({
            path: '/Teaching/MyCourses/VirtualMachineManual',
            query: {
              courseId: this.courseId,
              chapterId: item.chapterId,
              taskId: item.taskId,
            },
          })
          location.reload()
        }
      }

      self.singleTask = item.chapterId
    },
    // 确定跳转实验详情
    VirtualSave() {
      let self = this
      if (
        self.roles == 'TEACHER' ||
        self.roles == 'MARKET_TEACHER' ||
        self.roles == 'UNIVERSITY_TEACHER'
      ) {
        // 跳转实验页
        self.$router.push({
          path: '/Teaching/MyCourses/VirtualMachine',
          query: {
            courseId: self.courseId,
            chapterId: self.clickId,
            classId: self.classId,
            stepTypeStr: self.stepType,
            singleChaper: self.singleTask,
          },
        })
      } else if (self.roles == 'STUDENT') {
        self.$router.push({
          path: '/Teaching/MyCourses/STVirtualMachine',
          query: {
            courseId: self.courseId,
            chapterId: self.clickId,
            classId: self.classId,
            stepTypeStr: self.stepType,
            singleChaper: self.singleTask,
          },
        })
      }
      self.dialogVirtual = false
    },
    //自动到最近学习
    scrollFn(n) {
      // setTimeout(()=>{
      //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top})
      // },10)
      this.$nextTick(() => {
        let topValue = $('.studying').parent().offset().top
        if (topValue > n) {
          $('.detailBox').animate(
            { scrollTop: $('.studying').parent().offset().top - 100 },
            20
          )
        }
      })
    },
    // 判断是否添加过班级
    ClassInit() {
      let self = this
      self.$http
        .get('/tes/course/' + self.courseId + '/user-status')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.userStatus = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
<style scoped>
/* 滚动条样式 */
#spaceHeight {
  overflow-y: scroll;
}
#spaceHeight::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

#spaceHeight::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ccc; /*滚动条颜色*/
}

#spaceHeight::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.video-js {
  width: 100%;
  height: 450px;
}
.courseName2 {
  position: relative;
}

.courseName2 .icon-lock {
  position: absolute;
  right: -6px;
  top: 3px;
}

.el-collapse-item__header .collapsTitle2 .icon-lock {
  position: absolute;
  right: 11px;
  top: 3px;
}
.dialog-virtual >>> .el-dialog__footer {
  text-align: center;
}
.blocks::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.blocks::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 50px;
}
.blocks {
  overflow-y: scroll;
  max-height: 760px;
}

.el-collapse {
  border: none;
}
.el-collapse-item >>> .el-collapse-item__header {
  background: #2d3136;
  color: #fff;
  border-bottom: none;
  text-align: center;
  position: relative;
}
.el-collapse-item >>> .el-icon-arrow-right {
  display: none;
}
.el-collapse-item >>> .el-collapse-item__content {
  background: #26292c;
  color: #a2a3a4;
  padding: 5px 20px;
}
.el-collapse-item__content > div {
  padding: 4px 0;
}
.el-collapse-item >>> .el-collapse-item__wrap {
  border-bottom: none;
}
.questionNote >>> .v-note-wrapper {
  height: 400px;
}
.el-dialog__wrapper >>> .el-dialog__footer {
  text-align: center;
}
.cewnyers {
  width: 1120px;
  background: #fff;
  margin: 0 auto;
  margin-top: -57px;
  padding: 30px 40px;
}
.bigger-dialog >>> .el-dialog {
  width: min-content;
}
.bigger-dialog >>> .el-dialog__header {
  display: none;
}

.bigger-dialog >>> .el-dialog__body {
  padding: 0;
  background: transparent;
  text-align: center;
}
.bigger-dialog >>> img {
  width: 1200px;
}
</style>
<style lang="scss" scoped>
#main {
  .v-note-wrapper {
    z-index: 1;
  }
}
.el-dialog__wrapper {
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2);
}
#onlyDialog {
  .el-dialog {
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>

<style scoped lang="scss">
@import './../../../styles/ypublic.scss';
.markdown-body {
  width: auto;
  min-height: 765px;
}
.manySteep {
  background: #fff;
  height: 57px;
  border-bottom: 1px solid #e9ecef;
  line-height: 57px;
  overflow: hidden;
  position: sticky;
  z-index: 999;
  top: 60px;
  .manySteep-right {
    float: right;
  }
  .manySteep-left {
    float: left;
    .titlesteep {
      font-size: 16px;
      margin-left: 12px;
      max-width: 800px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
    i {
      cursor: pointer;
      vertical-align: text-bottom;
    }
  }
  .manySteep-center {
    width: 1200px;
    margin: 0 auto;
  }
}
.maskleft {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 120px;
  z-index: 999;
}
.maskleft-ul {
  width: 250px;
  background: #fff;
  z-index: 999;
  display: none;
  position: fixed;

  left: 0;
  top: 120px;
  transition: left 0.4s;
  -moz-transition: left 0.4s;
  -webkit-transition: left 0.4s;
  clear: both;
  padding: 20px 10px;
  li {
    line-height: 50px;
    height: 50px;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.maskleft-ul .activeSteep {
  color: #1277eb;
}
.preview-top {
  height: 60px;
  margin: 0 auto;

  .preview-top1 {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #101937;
    position: fixed;
    top: 0;
    color: #fff;
    z-index: 99;
    font-size: 14px;
    .preview-top-content {
      width: 1200px;
      margin: 0 auto;
      // span {
      //   margin-right: 40px;
      // }
      .preview-title {
        font-size: 18px;
        margin-right: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 200px;
        line-height: 60px;
      }
      .preview-line {
        line-height: 60px;
      }
      .beyond-hiding {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 200px;
        white-space: nowrap;
        line-height: 60px;
      }
    }
  }
  .preview-top2 {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: fixed;
    top: 80px;
    padding: 0;
    font-size: 14px;
    .preview-top-content {
      width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      .button-style {
        margin-left: 20px;
      }
    }
  }
}
// 笔记盒子 提问盒子
#onlyDialog {
  width: 490px;
  position: fixed;
  left: initial;
  top: 150px;
  bottom: initial;
  right: 95px;
  display: none;
  z-index: 1;
  overflow: hidden;
}
#issueDialog {
  width: 410px;
  position: absolute;
  left: initial;
  top: 210px;
  bottom: initial;
  right: 95px;
}
#onlyDialog .el-dialog,
#issueDialog .el-dialog {
  border-radius: 5px;
  margin: 0 !important;
  padding: 0;
  height: 100%;

  .el-dialog__header {
    background: $white;

    height: auto;
    line-height: initial;
    padding: 20px 20px 10px;

    .el-dialog__title {
      color: #070e28;
      line-height: 24px;
      font-size: 16px;
      float: left;
    }
  }

  .el-dialog__headerbtn {
    top: 20px;

    .el-dialog__close {
      color: #070e28;

      &:hover {
        color: #070e28;
      }
    }
  }
  #noteVal {
    overflow: auto;
  }
}
//主体
#jx-contain {
  position: relative;
  // 图片放大

  .jx-content {
    margin-top: 40px;
  }
  .sideBox {
    position: fixed;
    top: 130px;
    right: 25px;
    width: 60px;
    max-height: 240px;
    background: #1c1f21;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    z-index: 9;
    .sideBoxActive {
      color: #6d6d6d;
      pointer-events: none;
      cursor: default;
      opacity: 0.6;
      .iconfont {
        display: block;
        margin-bottom: 8px;
        font-size: 19px;
        color: #6d6d6d;
      }
    }
    li {
      height: 36px;
      width: 25px;
      display: block;
      font-size: 12px;
      margin: 30px auto 38px;
      position: relative;
      cursor: pointer;
      color: #dfe0e0;
      .iconfont {
        display: block;
        // margin-bottom: 8px;
        font-size: 19px;
      }
      &:hover {
        color: #fff;
      }
    }
  }
  .sideBox2 {
    top: 290px;
  }
  // 暂无数据
  .no-data-tips {
    padding-top: 10%;
    text-align: center;
    & > p {
      margin: 30px 0;
      color: #9999;
      font-size: 16px;
    }
  }
}
// 二期需求
.el-annotation,
.el-notes {
  .button-style {
    &.clear {
      color: #bbbbbb;
      border: 1px solid #bbbbbb;
      &:hover {
        color: #bbbbbb;
        border: 1px solid #bbbbbb;
        background: #fff;
      }
      &.active {
        color: #1277eb;
        border: 1px solid #1277eb;
        &:hover {
          background: #1277eb;
          color: #fff;
        }
      }
    }
  }
}

//专科版本需求
//详情盒子
.detailBox {
  width: 400px;
  position: fixed;
  top: 133px;
  bottom: initial;
  right: 95px;
  background: #26292c;
  max-height: 760px;
  border-radius: 4px;
  display: none;
  z-index: 9;
  .chapterList-top {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 18px;
    & > p {
      line-height: 50px;
      color: #a2a3a4;
    }
    i {
      color: #a2a3a4;
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .infoName {
    display: inline-block;
    &:hover {
      span {
        color: #1374e4;
      }
      .crile {
        background: #1374e4;
      }
    }
  }
  .icon-diannao-copy {
    font-size: 14px;
    margin-left: 8px;
    color: #1374e4;
    vertical-align: super;
  }
  .courseName {
    margin: 5px 0;
    cursor: pointer;
    &:hover {
      color: #fff;
    }
    .icon-tubiaozhizuomoban1 {
      color: #1374e4;
      font-size: 16px;
    }
  }
}
.collapsTitle {
  // 新加的start
  margin: 10px 0 10px 0;
  // 新加的end
  text-align: left;
  // margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 22px;
  color: #a2a3a4;
  .collapsTitle_span {
    max-width: 270px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 13px;
  }
  .icon-chaibaoguoqujian {
    color: #a2a3a4;
    font-size: 14px;
  }
  &:hover {
    color: #fff;
    .icon-chaibaoguoqujian {
      color: #fff;
    }
  }
  .icon-tubiaozhizuomoban1 {
    color: #1374e4;
    font-size: 16px;
  }
}
.collapsTitle2 {
  text-align: left;
  // margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 22px;
  color: #a2a3a4;
  .collapsTitle_span {
    max-width: 270px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 13px;
  }
  .icon-chaibaoguoqujian {
    color: #a2a3a4;
    font-size: 14px;
  }
  &:hover {
    color: #fff;
    .icon-chaibaoguoqujian {
      color: #fff;
    }
  }
  .icon-tubiaozhizuomoban1 {
    color: #1374e4;
    font-size: 16px;
  }
}
.icon-shijian00 {
  color: #1374e4;
  margin-left: 5px;
}

.crile {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a2a3a4;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 9px;
}
.studying {
  color: #1374e4;
}
.crileBg {
  background: #1374e4;
}
.detailbox {
  padding: 2px 0 2px 15px;
  cursor: pointer;
  &:hover {
    color: #1374e4;
    .crile {
      background: #1374e4;
    }
  }
}
.Tiltlefiles {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 210px;
  cursor: pointer;
}

.dialog-content {
  p {
    font-size: 14px;
    text-align: center;
    line-height: 38px;
    i {
      font-size: 18px;
      margin-right: 10px;
      color: #1277eb;
    }
  }
  .handbook-item {
    text-align: center;
    margin-top: 30px;
  }
}
.el-dialog__footer {
  .dialog-footer {
    .el-button {
      width: 90px;
    }
  }
}
.icon-42 {
  font-size: 12px;
  vertical-align: text-bottom;
  margin-left: -2px;
  margin-right: 5px;
}
.dialogList {
  .dialog-content {
    text-align: center;
    i {
      font-size: 50px;
      color: #d6d6d6;
      display: block;
      margin-top: 25px;
    }
    p {
      font-size: 14px;
      text-align: center;
      line-height: 18px;
    }
    .handbook-item {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>

<!-- 王天宇 实验报告  -->
<style lang="scss">
#report-file-upload,#upload1,#upload2 {
  position: absolute;
  width: 100px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #cc281a;
  opacity: 0;
}
.vir-report {
  width: 600px;
  background: #fff;
  box-shadow: 0 0 20px rgba(74, 74, 74, 0.25882352941176473);
  border-radius: 5px;
  position: fixed;
  right: 100px;
  transform: translateY(-150px);
  .vir-report-header {
    position: relative;
    color: #474747;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    text-align: left;
    .model-download {
      cursor: pointer;
      position: absolute;
      right: 60px;
      font-size: 14px;
      color: #1277eb;
    }
    .el-dialog__headerbtn {
      top: 12px;
      i {
        color: #474747;
      }
    }
  }
  .vir-report-main {
    text-align: center;
    padding: 50px 0 100px;
    color: #474747;
  }
}
.vir-reportline {
  width: 600px;
  background: #fff;
  box-shadow: 0 0 20px rgba(74, 74, 74, 0.25882352941176473);
  border-radius: 5px;
  position: fixed;
  right: 100px;
  color: #474747;
  transform: translateY(-150px);
  .vir-reportline-header {
    position: relative;
    color: #474747;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    text-align: left;
    .el-dialog__headerbtn {
      top: 12px;
      i {
        color: #474747;
      }
    }
    .line-full {
      position: absolute;
      top: 0;
      right: 50px;
      cursor: pointer;
      color: #385899;
    }
  }
  .vir-reportline-main {
    padding: 0 15px;
    .mavon-editor-con > div {
      height: 100px;
      box-shadow: none !important;
    }
  }
  .vir-reportline-footer {
    padding: 20px 0;
  }
}
.vir-reportline.line-full-box {
  top: 128px;
  transform: translateY(0px);
}
</style>
<!-- 王天宇 实验报告 end -->
<!-- 王天宇 星级评分 css -->
<style lang="scss">
.vmm-star-box {
  margin-left: 40px;
  display: flex;
  align-items: center;
}
</style>
<!-- 王天宇 星级评分 css end -->

<style lang="scss" scoped>
.upload-btns{
  display: flex;
  justify-content: center;
  align-items: center;
  height:500px;
  >div{
    position: relative;
    width: 198px;
    height: 229px;
    border: 1px dashed #4A90E2;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 152px;
    font-size: 18px;
    color: #4A70AE;
    cursor: pointer;
    &:nth-child(1){
      background:url('../../../assets/images/vmm-upload-btn1.png') no-repeat 64px 52px;
      margin-right:60px;
    }
    &:nth-child(2){
      background:url('../../../assets/images/vmm-upload-btn2.png') no-repeat 64px 52px;
    }
    &:hover{
      background-color: #E6F0FF;
      border: 2px solid #4A90E2; 
    }
    >div{
      transform: translate(0px, 56px);
      font-size: 14px;
      width: 100%;
      line-height:20px;
      color:#000;
    }
  }
}
.synchronization {
  font-size: 10px;
  color: #409eff;
  margin-left: 20px;
  &:hover {
    color: #385899;
    cursor: pointer;
  }
}
.clearfix {
  width: 100%;
  position: relative;
  .down-time {
    position: absolute;
    font-size: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 200px;
    span {
      width: 90px;
    }
    p {
      width: 125px;
    }
  }
}
</style>